<!-- 电子签章首页 -->
<template>
  <div class="electronic-signature-home">
    <div class="operation-info">
      <div class="select-tabs">
        <tab-sel :tabs="tabsArr" :info="tabsArr[activeIndex].list" @seled='activeItem' />
      </div>
      <div class="operation-video">
        <video controls preload src="https://m.met-ec.com/cdn/uc/pc/电子签章管理.mp4"></video>
      </div>
    </div>
    <div class="business-card-corver">
      <business-card
        class="business-card-item"
        :data="item"
        v-for="(item, index) in cardList"
        :key="index + 'm'"
      />
      <div
        class="placeholder-item"
        v-for="(item, index) in cardList.length * 3"
        :key="index + 'n'"
      ></div>
    </div>
  </div>
</template>
<script>
import tabSel from '@/moduleComponents/home/tab-sel.vue'
import businessCard from '@/moduleComponents/home/business-card.vue'
import { getCountAuthentication } from '@api/interface_center_v1.js'
export default {
  name: 'electronSignatureHome',
  components: {
    tabSel,
    businessCard
  },
  data() {
    return {
      tabsArr: [{name: '开通电子签章', id: 1,list: [
        {title: '企业电子签章认证', text: '让您的企业拥有一个电子签章。', key: 1},
        {title: '个人电子签章认证', text: '个人电子签章身份认证。', key: 2},
        {title: '企业电子签章授权', text: '给您企业已认证人员授权公司电子签章。只有经授权的人员才可使用企业电子签章。', key: 3},
        {title: '集团企业电子签章授权', text: '当您是集团企业时，可对集团中其他企业人员授权本公司电子签章。', key: 4},
      ]}],
      cardList: [
        {
          signProps: 'companyCount',
          title: '企业电子签章认证',
          info: '已认证',
          num: 0,
          logoUrl: require('@assets/img/home/pc-qyrz-qydzqzrzbg-icon.png'),
          bgImgUrl: require('@assets/img/home/pc-qyrz-dzqzgl-bg.png')
        },
        {
          signProps: 'personalCount',
          title: '个人电子签章认证',
          info: '已认证',
          num: 0,
          logoUrl: require('@assets/img/home/pc-qyrz-grdzqzrzbg-icon.png'),
          bgImgUrl: require('@assets/img/home/pc-qyrz-dzqzgl-bg.png')
        },
        {
          signProps: 'authorizeCount',
          title: '企业电子签章授权',
          info: '已授权',
          num: 0,
          logoUrl: require('@assets/img/home/pc-qyrz-qydzsqbg-icon.png'),
          bgImgUrl: require('@assets/img/home/pc-qyrz-dzqzgl-bg.png')
        },
        {
          signProps: 'companyAuthorizeCount',
          title: '集团企业电子签章授权',
          info: '已授权',
          num: 0,
          logoUrl: require('@assets/img/home/pc-qyrz-jtqydzqzsqbg-icon.png'),
          bgImgUrl: require('@assets/img/home/pc-qyrz-dzqzgl-bg.png')
        }
      ],
      activeIndex: 0
    }
  },
  created(){
    this.getData()
  },
  methods:{
    activeItem(index) {
      this.activeIndex = index
    },  
    getData(){
      this.$axios({
        method: 'GET',
        url: getCountAuthentication
      })
        .then(res => {
          this.cardList.forEach(item =>{
            item.num = res.data.payload[item.signProps] || 0
          })
        })
        .finally(() => {})
    }
  }
}
</script>
<style lang="less">
.electronic-signature-home {
  box-sizing: border-box;
  padding: 14px 26px;
  overflow: auto;
  .operation-info {
    display: flex;
    .select-tabs {
      width: 450px;
      .info-wrapper {
        height: calc(100% - 40px);
      }
    }
    .operation-video {
      flex: 1;
      height: auto;
      padding-top: 36px;
      video {
        width: 100%;
        height: 100%;
      }
    }
  }

  .business-card-corver {
    margin-top: 44px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .business-card-item {
      margin-top: 20px;
    }
    .placeholder-item {
      width: 260px;
      height: 0;
      font-size: 0;
    }
  }
}
</style>
